﻿<%@ page language="java" contentType="text/html; charset=utf-8"
 pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<link href="../js/jquery/css/rest.css" type="text/css" rel="stylesheet" />
<link href="../js/jquery/css/admin.css" type="text/css"	rel="stylesheet" />
<link href="../js/jquery/css/ui.jqgrid.css" type="text/css" rel="stylesheet" />
<link href="../js/jquery/css/ui.multiselect.css" type="text/css"	rel="stylesheet" />
<link href="../js/jquery/css/jquery-ui-1.10.3.custom.min.css"	type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../js/jquery/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../js/jquery/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="../js/jquery/jquery-ui-1.10.3.custom.min.js"></script>
 
<script type="text/javascript">
	$(function() {
		$("#gridTableDetail").jqGrid({
			url : "../GPSInfoQueryAction?method=listDetail",
			datatype : "json",
			mtype : "GET",
			height :"auto",
			width :$(window).width()*0.90,
			colModel : [ {	
			    name : "carId",index : "carId",	label : "车牌号",align : "center",classes : "myFontClass"}, {	
			    name : "realName",index : "realName",	label : "姓名",align : "center",classes : "myFontClass"}, {		
				name : "county",index : "county",	label : "户主所在地",align : "center",classes : "myFontClass"}, {
				name : "userPhone",index : "userPhonenty",	label : "用户联系电话",align : "center",classes : "myFontClass"}, {
				name : "moduleMark",index : "moduleMark",label : "GPRS编号",align : "center",	classes : "myFontClass"}, {	
				name : "regitTime",index : "regitTime",label : "注册时间",align : "center",	classes : "myFontClass"}, {
				name : "UTCTime",index : "UTCTime",label : "数据时间",align : "center",	classes : "myFontClass"}, {				
				name : "latitude",index : "latitude",label : "经度",align : "center",classes : "myFontClass"}, {				
				name : "longitude",index : "longitude",label : "纬度",align : "center",	classes : "myFontClass"}, {
				name : "GPSStatue",index : "GPSStatue",label : "GPS状态",align : "center",classes : "myFontClass"},{
				name : "satellite_Number",index : "satellite_Number",label : "卫星数量",align : "center",classes : "myFontClass"},{
				name : "status",index : "status",label : "车辆状态",align : "center",classes : "myFontClass"},
			],
			viewrecords : true,
			rowNum : 15,
			rowList : [ 10, 15, 20 ],
			prmNames : {
				search : "search"
			}, //(1)
			jsonReader : {
				root : "gridModel", 
				records : "record", 
				repeatitems : false	
			}, 
			sortname : "UTCTime",
			sordorder : "desc",
			multiselect : true,

			pager : "#gridPager1",
			hidegrid : false,
			 gridComplete:function(){  //在此事件中循环为每一行添加修改和删除链接
                    var ids=jQuery("#gridTable").jqGrid('getDataIDs');
                    for(var i=0; i<ids.length; i++){
                        var id=ids[i];   
                       var operation = "<a href='#' style='color:#f60' onClick='show("+id+");' >"+"操作"+"</a>";  //这里的onclick就是调用了上面的javascript函数 Modify(id)  
                        jQuery("#gridTable").jqGrid('setRowData', ids[i], { Operation: operation});
                         var detail = "<a href='#' style='color:#f60' onClick='Detail("+id+");' >"+"查看"+"</a>";  //这里的onclick就是调用了上面的javascript函数 Modify(id)  
                        jQuery("#gridTable").jqGrid('setRowData', ids[i], { Detail: detail});
                    }
                }
				});
		$("#gridTable").jqGrid({
			url : "../GPSInfoQueryAction?method=listByConditions",
			datatype : "json",
			postData : {
				'ModuleMark' :"<%=request.getParameter("ModuleMark")%>"
			}, //发送数据 
			mtype : "GET",
			height :"auto",
			width :$(window).width()*0.970,
			colModel : [ {	
			    name : "carId",index : "carId",	label : "车牌号",align : "center",classes : "myFontClass"}, {	
			    name : "realName",index : "realName",	label : "姓名",align : "center",classes : "myFontClass"}, {		
				name : "county",index : "county",	label : "户主所在地",align : "center",classes : "myFontClass"}, {
				name : "userPhone",index : "userPhonenty",	label : "用户联系电话",align : "center",classes : "myFontClass"}, {
				name : "moduleMark",index : "moduleMark",label : "GPRS编号",align : "center",	classes : "myFontClass"}, {	
				name : "regitTime",index : "regitTime",label : "注册时间",align : "center",	classes : "myFontClass"}, {
				name : "UTCTime",index : "UTCTime",label : "数据时间",align : "center",	classes : "myFontClass"}, {				
				name : "latitude",index : "latitude",label : "经度",align : "center",classes : "myFontClass"}, {				
				name : "longitude",index : "longitude",label : "纬度",align : "center",	classes : "myFontClass"}, {
				name : "GPSStatue",index : "GPSStatue",label : "GPS状态",align : "center",classes : "myFontClass"},{
				name : "satellite_Number",index : "satellite_Number",label : "卫星数量",align : "center",classes : "myFontClass"},{
				name : "status",index : "status",label : "车辆状态",align : "center",classes : "myFontClass"},{
				name : "Operation",index:"userId",label : "操作",align:"center",sortable:false},{
				name : "Detail",index : "userId",label : "车辆轨迹列表",align : "center",classes : "myFontClass"},
			],
			viewrecords : true,
			rowNum : 15,
			rowList : [ 10, 15, 20 ],
			prmNames : {
				search : "search"
			}, //(1)
			jsonReader : {
				root : "gridModel", 
				records : "record", 
				repeatitems : false	
			}, 
			sortname : "UTCTime",
			sordorder : "desc",
			multiselect : true,

			pager : "#gridPager",
			hidegrid : false,
			 gridComplete:function(){  //在此事件中循环为每一行添加修改和删除链接
                    var ids=jQuery("#gridTable").jqGrid('getDataIDs');
                    for(var i=0; i<ids.length; i++){
                        var id=ids[i];   
                       var operation = "<a href='#' style='color:#f60' onClick='show("+id+");' >"+"操作"+"</a>";  //这里的onclick就是调用了上面的javascript函数 Modify(id)  
                        jQuery("#gridTable").jqGrid('setRowData', ids[i], { Operation: operation});
                         var detail = "<a href='#' style='color:#f60' onClick='Detail("+id+");' >"+"查看"+"</a>";  //这里的onclick就是调用了上面的javascript函数 Modify(id)  
                        jQuery("#gridTable").jqGrid('setRowData', ids[i], { Detail: detail});
                    }
                }
				});
				$("#search_btn").click(function() {
			var keyWords = $("#keyWordsId").val();
			var choiceitem = $("#choiceItemId").val();
			if (keyWords == "")
				alert("请输入查询关键字,并选择对应的字段!!");
			else {
				$("#gridTable").jqGrid('setGridParam', {
					datatype : 'json',
					postData : {
						'kw' : encodeURI(keyWords),
						'ci' : choiceitem
					}, //发送数据  
					page : 1
				}).trigger("reloadGrid"); //重新载入
			}
		});
		$("#search_btn").click(function() {
			var keyWords = $("#keyWordsId").val();
			var choiceitem = $("#choiceItemId").val();
			if (keyWords == "")
				alert("请输入查询关键字,并选择对应的字段!!");
			else {
				$("#gridTable").jqGrid('setGridParam', {
					datatype : 'json',
					postData : {
						'kw' : encodeURI(keyWords),
						'ci' : choiceitem
					}, //发送数据  
					page : 1
				}).trigger("reloadGrid"); //重新载入
			}
		});

		//刷新
		$("#refreshId").click(function() {
			$("#gridTable").jqGrid('setGridParam', {
				datatype : 'json',
				page : 1
			}).trigger("reloadGrid"); //重新载入  
		});
		
		function refreshJquery() {
			$("#gridTable").jqGrid('setGridParam', {
				datatype : 'json',
				page : 1
			}).trigger("reloadGrid"); //重新载入  
		}	         
$( "#dialog-form-show" ).dialog({
			autoOpen: false,
			height: 250,
			width: 250,
			modal: true,
			buttons: {	
			   "启动": function() {	
			   var ModuleMark = document.showFormId.ModuleMark.value;
			   var c = confirm("您正准备启动编号为"+ModuleMark+"车辆");							
	           if (c == true) {							
				$.post(	"../GPSInfoQueryAction?method=Start&moduleMark="													
				+ ModuleMark, function(data) {	
				if (data=="success") data="启动成功";	
				else data="启动失败";									
				alert(data);											
			});
				}
			   $( this ).dialog( "close" );
			    },	
			    "停车": function() {	
			      var ModuleMark = document.showFormId.ModuleMark.value;
			   var c = confirm("您正准备停止编号为"+ModuleMark+"车辆");							
	           if (c == true) {							
				$.post(	"../GPSInfoQueryAction?method=End&moduleMark="													
				+ ModuleMark, function(data) {	
				if (data=="success") data="停止成功";	
				else data="停止失败";											
				alert(data);											
			});
				}
			   $( this ).dialog( "close" );			  
			    },		
				"关闭": function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
			refreshJquery();
			}
		});	
		
		$( "#dialog-form-Detail" ).dialog({
			autoOpen: false,
			height: "auto",
			width: $(window).width()*0.92,
			modal: true,
			buttons: {	
				"关闭": function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
			refreshJquery();
			}
		});					
	}); 
	function Detail(id)
{
var rowData = $("#gridTable").getRowData(id);
$("#gridTableDetail").jqGrid('setGridParam', {
				datatype : 'json',
				postData : {
				'ModuleMark' :rowData.moduleMark,
			}, //发送数据 
				page : 1
			}).trigger("reloadGrid"); //重新载入  
$("#dialog-form-Detail").dialog("open");  
}
function show(id)
{
var rowData = $("#gridTable").getRowData(id);	
$.ajax({  
type: "post",  
url: "../GPSInfoQueryAction?method=Operation",  
data:"moduleMark="+rowData.moduleMark, 
success: function(msg){ 
if (msg==1) msg="正常行驶";
else if(msg==2) msg="强制停车";
else msg="状态不明";
$("#Statues").val(msg);
$("#ModuleMark").val(rowData.moduleMark);
$("#dialog-form-show").dialog("open"); 
}  
}); 

}	
</script>
<!-- Bootstrap -->
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
   
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container-fluid">
		<!--头部开始-->
<div class="header">
		<!--头部主题开始-->
<div class="navbar navbar-static-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
      <img src="../images/logo-m.png" height="34" class="img-rounded" >
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-brand pull-right">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=(String) request.getSession().getAttribute("user") %> <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="../EnterpriseUser/person.jsp">个人中心</a></li>
            <li><a href="../EnterpriseUser/ShowMapEnterprise.jsp">车辆追踪</a></li>
            <li><a href="../EnterpriseUser/listInfo.jsp">车辆列表</a></li>
            <li class="divider"></li>
            <li><a href="../login.jsp">安全退出</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</div>
</div>
<hr/>
<div class="main11" id="main11">
<table id="gridTable"></table>
<div id="gridPager"></div>
</div>
<div id="dialog-form-Detail">
		<table id="gridTableDetail"></table>
        <div id="gridPager1"></div>
	</div>
<div id="dialog-form-show" class="right" style="height:100%;overflow:auto;" >
		<form id="showFormId" name="showFormId">
		<div class="nva_bg">
				<span class="f_l"><strong>车辆操作</strong></span>
			</div>
			<input type="hidden" name="ModuleMark" id="ModuleMark"/>
			<div style="width:100%;height:auto; margin:2px auto;padding:0px;">
				<table width="100%" cellpadding="0" cellspacing="0" border="0"	class="formTable" style="margin:0px;">	
					<tr>
						<th width="20%" class="redColor">状态</th>
						<td width="30%" style="text-align:left;text-indent:1em;"><span ><input type="text" name="Statues" id="Statues" readonly/></span></td>
					</tr>
				</table>	
			</div>
		</form>
	</div>
</div>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>